<template>
  <DetailStructure title="新闻资讯" first-sentence="这里有最新的公司动态，产品动态抢先看，" second-sentence="创新与进步只为给您带来卓越体验。" :bg="newsBg">
    <template #content>
      <div class="news-container">
        <div class=""></div>
        <div class="news-wrapper">
          <div class="news" v-for="(item,index) in newsList">
            <div class="img-container">
              <img :src="item.displayImg" :alt="'新闻图片'+index">
            </div>
            <div class="content-container">
              <div class="title">{{item.title}}</div>
              <div class="desc">{{item.desc}}</div>
              <div class="date-num">
                <span class="date">发布时间：{{item.yearMonth+'.'}}{{item.day}}</span>
                <span class="num">浏览次数：{{item.viewNum}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </DetailStructure>
</template>

<script setup>
// 新闻资讯
import newsBg from '@/assets/imgs/news/newsBg.jpg'
import DetailStructure from "@/components/common/DetailStructure.vue";

import {newsList} from "@/utils/data.js";
</script>

<style lang="scss" scoped>
.news-container{
  width: 100%;
  height: 100%;
  background: #eeeeee;
  .head-title{
    font-size: 35px;
    font-weight: bold;
    text-align: center;
    //padding: 20px 0;
    padding-top: 50px;
  }
  .news-wrapper{
    width: $maxWidth;
    margin: 0 auto;
    padding: 10px;
    .news{
      @include flex();
      background: #ffffff;
      margin: 10px;
      .img-container{
        width: 300px;
        height: 150px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .content-container{
        padding: 10px 20px;
        @include flex($row:space-between, $direc:column);
        .title{
          font-size: 20px;
          font-weight: bold;
          color: $themeColor;
        }
        .desc{
        }
        .date-num{
          @include flex($row:space-between);
          font-size: 14px;
        }
      }
    }
    .news:hover{
      box-shadow: $boxShadow;
    }
  }
}
</style>
